<template>
	<view class="bg-grey container">
		<u-tabs class="info-tab" :list="tabs" active-color="#DF2E2E" :is-scroll="false" :current="current"
			@change="change"></u-tabs>
		<sb-back-icon />
		<view class="flex j-c" v-if="show">
			<u-loading :show="show" mode="circle"></u-loading>
		</view>
		<view v-if="!couponList.length" class="empty absolute w100 flex flex-col j-c a-c">
			<u-image class="marh10" width="100" height="100" src="/static/images/order/empty-coupon.png"></u-image>
			<view class="title">暂无优惠券哦</view>
		</view>
		<view class="info-content pad10 absolute marv20 w100" v-else>
			<view v-for="(v, i) in couponList" :key="i" @click="selected(v)"
				class="relative bg-white flex radius12 marv20" style="height: 180rpx">
				<view style="width: 70%" class="flex flex-col j-c relative padh30">
					<view class="tip absolute t-c c-w font24" v-if="v.visible">
						可用
					</view>
					<view class="padv10 bold">{{ v.tk.name }}</view>
					<view class="padv10">{{ v.tk.desc }}</view>
					<view class="font24 c-d flex a-c"> 有效期至{{ v.tk.expires }} </view>
				</view>
				<view class="flex1 c-w flex flex-col a-c j-c" :style="{
            backgroundColor: v.status === 1 ? '#ccc' : '#FF6666',
            color: '#fff',
          }">
					<view class="w100 t-c font48">{{
            v.tk.type === 3 ? `${v.tk.discount}折` : `${v.tk.reduce}元`
          }}</view>
					<view v-if="v.tk.type !== 3" class="font33 t-c">直减</view>
				</view>
				<view class="absolute bg-grey radius20 up" style="width: 40rpx; height: 40rpx"></view>
				<view class="absolute bg-grey radius20 down" style="width: 40rpx; height: 40rpx"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				show: false,
				tabs: ["可用", "不可用"].map((name) => ({ name })),
				current: 0,
				couponList: [],
				query: {
					status: 0,
					pageIndex: 1,
					pageSize: 10,
				},
			};
		},
		onLoad({ id }) {
			if (id) this.id = id;
			if (!this.$checkLogin()) return this.$redirect2Login();
			this.getCouponInfo();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.query.pageIndex = 1;
			this.getCouponInfo();
		},
		onReachBottom() {
			this.query.pageIndex++
			this.getCouponInfo();
		},
		methods: {
			async getCouponInfo() {
				this.query.status = this.current;
				let { data: { rows }, success, } = await this.$get(`/ticket/mine`, this.query);
				if (!success) return this.$msg("获取优惠券失败");
				if (this.query.pageIndex === 1) this.couponList = [];
				if (!rows.length) {
					if (this.query.pageIndex > 1) this.$msg("没有更多数据");
				} else this.couponList = this.couponList.concat(rows);
			},
			change(index) {
				this.current = index;
				this.query.pageIndex = 1;
				this.getCouponInfo();
			},
			selected(item) {
				// if (this.fromOrder) {
				// 获取当前打开的所有页面对象
				let pages = getCurrentPages();
				// 倒数第二个就是就是要找到的页面
				let prev = pages[pages.length - 2];
				// // 进行赋值
				if (prev && this.id) {
					prev.discountCoupon = item;
					this.$back();
				}

				// },
			},
		},
	};
</script>

<style lang="scss" scoped>
	.up {
		top: -20rpx;
		left: calc(50% + 125rpx);
	}

	.down {
		bottom: -20rpx;
		left: calc(50% + 125rpx);
	}

	.tip {
		background-color: #e8364c;
		width: 150rpx;
		border-bottom-right-radius: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		left: 0;
		top: 0;
	}

	.info-tab {
		z-index: 100;
	}

	.info-content {
		top: 50rpx;
	}

	.empty {
		top: 20%;

		.title {
			color: #aaa;
		}
	}
</style>
